<template>
    <div class="inOut-stock-warp">
            <h3>评估得分分析图</h3>

        <div ref="inOutStock" style="width:100%;height:100%;">

        </div>
    </div>
</template>

<script>
    let echarts = require('echarts');

    export default ({
        props: {
            schoolType: {type: String, default: ""}
        },
        data() {
            return {json: []}
        },
        watch: {
            schoolType(val) {
                this.query_click()
            }
        },
        mounted() {
            this.query_click();
        },
        methods: {
            query_click() {
                this.$http.post("/stastics/location10",{schoolType:this.schoolType}).then(res => {
                    var json = res.data.data;

                    this.json = json.map(it => [it.name, it.score]).sort((a,b)=>a[1]-b[1])
                    this.drawChart(this.json);
                })
            },
            // json: key:学校名， value:分值。
            drawChart(json) {
                var min = Object.values(json.map(it => it[1])).min();
                var max = Object.values(json.map(it => it[1])).max();
                var distance = max - min;
                var minValue = parseInt(min /10) * 10;
                if (distance == 0) {
                    min = min - 1;
                }

                var data = json.map(it => {
                    return [((it[1] - min) * 100 / distance).ToRound(), it[1], it[0]]
                });

                var option = {
                    //title: {text: "前", left: "center"},
                    dataset: {
                        source: [['score', 'amount', 'product']].concat(data)

                    },
                    grid: {containLabel: false, left: 40,top:20,bottom:20,right:20},
                    xAxis: {type: 'category', name: "" , showMaxLabel: true},
                    yAxis: {type: "value", name: '', min:minValue},
                    visualMap: {
                        show: false,
                        min: 10,
                        max: 100,
                        dimension: 0,
                        inRange: {
                            color: ['#daab11',"#0fcc8b", '#0a3c97']
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            encode: {
                                // Map the "amount" column to X axis.
                                x: 'product',
                                // Map the "product" column to Y axis
                                y: 'amount'
                            }
                            ,label: {
                                normal: {
                                    show: true,            //显示数字
                                    position: "insideTop"        //这里可以自己选择位置
                                }
                            }
                        }
                    ]
                };


                console.log(option);
                var myChart = echarts.init(this.$refs.inOutStock);
                myChart.setOption(option);
            }
        }
    })
</script>

<style scoped>
    .inOut-stock-warp {
        width: 100%;
        height: 100%;
        margin-top: 20px;
    }

    h3 {
        margin-left: 20px;
        display: flex;
    }

    h3:before {
        content: " ";
        display: block;
        width: 6px;
        background-color: #5B9BD5;
        margin-right: 10px;
    }

</style>
